<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>测试小游戏</title>
	<script src="lib/easeljs-0.7.1.min.js"></script>
	<script src="lib/tweenjs-0.5.1.min.js"></script>
	<script src="lib/soundjs-0.5.2.min.js"></script>
	<script src="lib/preloadjs-0.4.1.min.js"></script>
	<script src="lib/jquery-3.4.1.js"></script>
	<script src="lib/jquery-3.4.1.min.js"></script>
	<script src="lib/BitmapText.js"></script>
	<style type="text/css">
		body{
			background: #DAE2F8;  /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #D6A4A4, #DAE2F8);  /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #D6A4A4, #DAE2F8); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */




		}
		button {
  color: #EF7F7D;
  transition: 0.5s;
}
button:hover, button:focus {
  border-color: var(--hover);
  color: #fff;
}
button {
  background: none;
  border: 3px solid;
  border-radius: 25px;
  font: inherit;
  line-height: 1;
  margin: 0.5em;
  padding: 1em 2em;
}
		.raise {
			--color: #EF7F7D;
			--hover: #e5ff60;
		}
		.raise:hover,
		.raise:focus {
			box-shadow: 0 0.5em 0.5em -0.4em var(--hover);
			transform: translateY(-0.25em);
		}
		li{
			background-color: #eea6b7;
			color: white;
			width: 200px;
			border: 1px solid #ccc;
			border-radius: 25px;
			margin-bottom: 50px;
		}
		li div{
			display: none;
			color: #000000;
			width: 200px;
			height: auto;
			border: 3px solid #eea6b7;
			background-color: #fff;
		}
	</style>
</head>
<body onload="init()">
	<div style="display: flex;">
	<div style="position: absolute;z-index:1;margin-left: 1100px;margin-top: 5px;">
	<button class="raise">显示</button>
	<button class="raise">隐藏</button>
	<button class="raise"  onclick="shouye()">回到首页</button>
	<p style="color: white;font-size: 20px;margin-right: 100px">将下面的方块正确拖动到对应的猫猫图片上即可赢得游戏！</p>
	<p style="color: white;font-size: 20px">点击按钮可查看提示噢 ~</p>
	<div1>
	<div style="display: flex;">
		<ul>
			<li>
				<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;布偶猫</span>

				<div>布偶猫是猫中较大、较重的一种。它的头呈V形，眼大而圆，被毛丰厚，四肢粗大，尾长，身体柔软，多为三色或双色猫
					<img src="https://tse1-mm.cn.bing.net/th/id/R-C.8daa7ee26391a412a0b0d2b2b6bc7a46?rik=SBMaDD8FCe7YCg&riu=http%3a%2f%2f5b0988e595225.cdn.sohucs.com%2fimages%2f20180508%2f8a2bf96052b54dedbbfc4433f7adfe75.jpeg&ehk=jI7dC9niTeEDZCxQV%2fr5JdOOfCpcapYQJeKOZZOujNQ%3d&risl=&pid=ImgRaw&r=0" style="width: 200px;height: 200px;"/></div>
			</li>

			<li>
				<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;英短金渐层</span>
				<div>它体形圆胖，四肢粗短发达，毛短而密，头大脸圆，性格极为友善温柔。金渐层被很多人称为“土豪金”，也被称作是“招财猫”。<img src="https://tse1-mm.cn.bing.net/th/id/R-C.d1734d3ec0aad5ce6300cb27ec6a16ce?rik=zAKhYN%2foCN%2ft%2bQ&riu=http%3a%2f%2fwww.baobeita.com%2fupload%2fimage%2fproduct%2f201903%2f10388800%2fbc1c8a2d-197b-46b2-8d9d-b5c1145215ad-large.jpg&ehk=6z6ahI4W58OeH0iOeTPP1UL6bsRmnbrjiUWFU%2b6zyIw%3d&risl=&pid=ImgRaw&r=0" style="width: 200px;height: 200px;"/></div>
			</li>

			<li>
				<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;波斯猫</span>
				<div>头大而圆，额、鼻、颚都是平平的。鼻子很短，鼻梁宽。眼睛又大又圆，表情丰富。耳小，尖端呈圆形，两耳分隔得很开。全身满是像丝一般柔软和有光泽的膨松的毛。
					<img src="https://tse1-mm.cn.bing.net/th/id/R-C.e7f348493d37247961ca573fbbe6b92b?rik=6K0jvQLPSN%2f82w&riu=http%3a%2f%2fwww.catlegendspersian.com%2fuploads%2fallimg%2f170606%2f1-1F606160525P8.jpg&ehk=S%2fIz7K4oGnP6ruwN8plVNtGlkkblY36koSNyAIVBSuk%3d&risl=&pid=ImgRaw&r=0" style="width: 200px;height: 200px;"/></div>
			</li>

			<li>
				<span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;橘猫</span>
				<div>橘猫的毛色通常分成全橘色、橘白相间两种。全橘色的猫，身上会带有浅浅白色条纹相间，仅有少数猫会在肚子呈现白色。橘白相间的猫，身上有大块橘色斑块与白底毛色相间。
				<img src="https://p1.hoopchina.com.cn/xzapp/513b02e40bb949b4badeee5c3485abbe.jpeg" style="width: 200px;height: 200px;"/></div>
			</li>
		</ul>
	</div>
</div1>
</div>
	<div style="position: absolute;z-index: 1;margin-top: 120px;margin-left: 50px;">
		<img src="https://tse1-mm.cn.bing.net/th/id/R-C.34ee17f79fb9dbb1716a53cffa60bed8?rik=eOhRwRYff7br2A&riu=http%3a%2f%2fimg.11665.com%2fimg01_p%2fi1%2fT1lxwNFtleXXXXXXXX_!!0-item_pic.jpg&ehk=cYv7VXzKvUlVjgmwrJ1yh5AJ2IO3kLTpSq8QFjjOQC4%3d&risl=&pid=ImgRaw&r=0" style="width: 200px;width: 200px;" />
		<img src="https://pic4.zhimg.com/v2-5c7d983da0d4cc47b06e590f145041d3_r.jpg?source=1940ef5c" style="width: 200px;width: 200px;margin-left: 47px;" />
		<img src="https://img14.360buyimg.com/pop/jfs/t1/169208/29/20146/161636/607fe58aE3cbec464/c6c42fc978674b12.jpg" style="width: 200px;width: 200px;margin-left: 45px;" />
		<img src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F-vo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2F54fbb2fb43166d22e2bf5dfc482309f79152d28a.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1643370522&t=fc1bb043ea12114fd7525d5a991a5073" style="width: 200px;width: 200px;margin-left: 45px;" />
	</div>
	<div style="display: flex;flex-direction: row;position: absolute;z-index: 1;margin-top: 480px;margin-left: 110px;font-size: 25px;color:white;">
	    <p>波斯猫</p>
		<p style="margin-left: 190px;">橘猫</p>
		<p style="margin-left: 160px;">英短金渐层</p>
		<p style="margin-left: 160px;">布偶</p>
	</div>
	<div style="position: absolute;z-index: 0">
	<canvas id="mycanvas" width="1050px" height="700px" >
	</canvas>
</div>
</div>
</body>
</html>
<script>
	var stage;
	var shapes =[];
	var slots =[];
	var score =0;
	function init(){
		stage = new createjs.Stage("mycanvas");
		buildShapes();

		createjs.Ticker.setFPS(60);
		createjs.Ticker.addEventListener('tick',function(){
			stage.update()
		})
	}

	function buildShapes(){
		var colors = ["#add5a2","#f7c173","#158bb8","#eba0b3"]
		var slot, shape;
		for (var i = 0; i < 4; i++) {
			slot = new createjs.Shape();
			slot.graphics.beginStroke(colors[i]);
			slot.graphics.beginFill("#ffffff");
			slot.graphics.drawRect(0,0,200,200);
			slot.y = 120;
			slot.x =(250*i)+50;
			slot.key = i;
			stage.addChild(slot);
			slots.push(slot)
		}

		var r;
		for (var i =0; i < 4; i++) {
			shape = new createjs.Shape();
			shape.graphics.beginFill(colors[i]);
			shape.graphics.drawRect(0,0,200,200)
			shape.key = i;
			shapes.push(shape)
			r = Math.floor(Math.random()*shapes.length)
			shape = shapes[r];
			shape.homeY = 420;
			shape.homeX = (250*i)+50;
			shape.x = shape.homeX;
			shape.y = shape.homeY;
			shape.addEventListener("mousedown",drawDrag)
			stage.addChild(shape)
			shapes.splice(r,1)
		}
	}

	function drawDrag(e){
		var shape = e.target
		var slot = slots[shape.key]
		stage.setChildIndex(shape,stage.getNumChildren()-1);
		stage.addEventListener("stagemousemove",function(e){
			shape.x = e.stageX;
			shape.y = e.stageY;
		})
		stage.addEventListener("stagemouseup",function(e){
			stage.removeAllEventListeners();
			var pt = slot.globalToLocal(stage.mouseX,stage.mouseY);
			if(slot.hitTest(pt.x,pt.y)){
				shape.removeEventListener("mousedown",drawDrag);
				score++;
				createjs.Tween.get(shape).to({x:slot.x,y:slot.y},200,createjs.Ease.quadOut).call(function(){
					if (score==4) {
						alert("恭喜你，获胜了！")
					}
				})
			}else{
				createjs.Tween.get(shape).to({x:shape.homeX,y:shape.homeY},200,createjs.Ease.quadOut)
			}
		})
	}
</script>
<script type="text/javascript">
	$('div1').hide(0)
	$('button:nth-child(1)').click(function(){
		//斜上方出现
		$('div1').show(1000,'linear',function(){console.log('显示成功')})
	})

	$('button:nth-child(2)').click(function(){
		$('div1').hide(1000,'linear',function(){console.log('隐藏成功')})
	})
</script>
<script type="text/javascript">
	$('ul>li').click(function() {
		$(this).children('div').css('display','block')
		$(this).siblings('li').children('div').css('display','none')
	})
	$('body').mouseleave(function() {
		$('ul>li').children('div').css('display','none')
	})
	function shouye(){
	window.open('./2.html')
}
</script>